<template>
  <div class="game-container" :class="{ 'logged-in': isConnected }">
    <!-- 背景效果 -->
    <div class="background-overlay"></div>
    
    <!-- 登录界面 -->
    
    <!-- 游戏主界面 -->
    <div class="game-dashboard">
      
      
      <main class="game-content">
        <div class="welcome-banner">
          <h2>欢迎回来，探险家！</h2>
          <p>准备好踏上新的寻宝之旅了吗？</p>
          
          <div class="stats-overview">
            <div class="stat-item">
              <i class="treasure-icon"></i>
              <span class="stat-value">{{treasureNumber}}</span>
              <span class="stat-label1">收集的宝藏</span>
              
            </div>
            <div class="stat-item">
              <i class="level-icon"></i>
              <span class="stat-value">{{charm}}</span>
              <span class="stat-label1">魅力值</span>
            </div>
            <div class="stat-item">
              <i class="rank-icon"></i>
              <span class="stat-value">{{rank}}</span>
              <span class="stat-label1">排名</span>
            </div>
          </div>
        </div>
        
        <div class="feature-tiles">
          <div class="feature-tile market-tile">
            <i class="market-icon"></i>
            <h3>交易市场</h3>
            <p>买卖稀有物品和NFT宝藏</p>
            <router-link to="/market"><el-button type="primary" plain>进入市场</el-button>
              </router-link>
          </div>
          
          <div class="feature-tile inventory-tile">
            <i class="inventory-icon"></i>
            <h3>我的背包</h3>
            <p>查看你的收藏和装备</p>
            <router-link to="/inventory"><el-button type="primary" plain>打开背包</el-button>
              </router-link>
          </div>
          
          <div class="feature-tile quest-tile">
            <i class="quest-icon"></i>
            <h3>收藏馆</h3>
            <p>查看我的收藏成就</p>
            <router-link to="/collection"><el-button type="primary" plain>进入收藏馆</el-button>
              </router-link>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useWalletStore } from '@/stores/walletStore'
import "../styles/HomeView.css"
import { ethers } from 'ethers'
// 状态变量
const walletStore = useWalletStore()
const isConnected = walletStore.isConnected
const treasureNumber = ref(null)
const charm = ref(null)
const rank = ref(null)
const totalPlayers = ref(null)
// 在钱包连接状态改变时获取NFT数量
watch(() => walletStore.isConnected, async (isConnected) => {
  if (isConnected) {
    await getTreasureNumber()
  } else {
    treasureNumber.value = 0
  }
})

// 在钱包地址改变时获取NFT数量
watch(() => walletStore.walletAddress, async (address) => {
  if (address && walletStore.isConnected) {
    await getTreasureNumber()
  }
})

onMounted(async () => {
  // 只有在钱包已连接的情况下才尝试获取NFT数量
  if (walletStore.isConnected && walletStore.walletAddress) {
    await getTreasureNumber()
  }
})
// 获取玩家拥有的宝藏数量
async function getTreasureNumber() {
  try {
    if (!walletStore.contract) {
      console.error("合约未初始化");
      return;
    }
    const userAddress = ethers.utils.getAddress(walletStore.walletAddress);
    // 先等待Promise解析完成，再调用toString()
    const nftResult = await walletStore.contract.balanceOf(userAddress);
    treasureNumber.value = nftResult.toString();
    console.log("玩家拥有的宝藏数量:", treasureNumber.value);
    console.log("用户地址:", userAddress);
    // 更新排行榜
    const tx = await walletStore.marketContract.updateRankingBoard();
    [rank.value, charm.value, totalPlayers.value] = await walletStore.marketContract.getPlayerRanking(userAddress);
    charm.value = await walletStore.contract.getPlayerCharm(userAddress);
    console.log("玩家排名:", rank.value);
    console.log("玩家魅力值:", charm.value);
    console.log("玩家总数:", totalPlayers.value);
    try {
      const supply = await walletStore.contract.totalSupply();
      console.log("NFT总供应量:", supply.toString());
    } catch (error) {
      console.error("获取NFT总供应量失败:", error);
    }
  } catch (error) {
    console.error("获取宝藏数量失败:", error);
  }
}



</script>

